<template>
<!--订阅-->
	<div id="subscribe">
		<div class="category" @click="categoryClick">
			<span class="themeBrowse" :class="themeBrowse? 'themeBrowseClick': ''">按主题浏览</span>
			<span class="messageBrowse" :class="messageBrowse? 'themeBrowseClick': ''">按信息源浏览</span>
		</div>
		<!-- 我关注的主题 -->
		<div class="subscribe-follow">
			<div class="subscribe-follow-l">
				<span>我关注的{{titleName}}</span>				
			</div>
			<div class="subscribe-follow-r">
				<span class="spread" @click="spreadClick">
					<span>展开</span>
					<i></i>
				</span>
				<span class="categoryAdd" @click="categoryAdd">
					<i></i>
				</span>
			</div>
		</div>
		<!-- 我关注的主题列表 -->
		<div class="subscribe-follow-hide" :style="spreadShow">
			<div class="follow-hide-list" v-if="themeUlclick === 0 && themeUldatas.length !== 0" v-for="(v, i) in themeUldatas" :data-id="i" :key="i" @click="followList">
				<img src="../../../assets/test1.jpg" alt="推荐图">
				<a :href="'#listA'+i">
					<span :data-id="i" :data-mtId="v.mtId">{{v.text}}</span>
				</a>
			</div>
			<div class="follow-hide-list" v-if="themeUlclick === 1 && MUldatas.length !== 0" v-for="(v, i) in MUldatas" :data-id="i" :key="i" @click="followList">
				<img src="../../../assets/test1.jpg" alt="推荐图">
				<a :href="'#listB'+i">
					<span :data-id="i" :data-mtId="v.id">{{v.text}}</span>
				</a>
			</div>
		</div>
		<!-- 订阅内容 -->
		<div class="subscribe-information">
			<div class="subscribe-information-l">
				<!-- 制作发稿 -->
				<div class="subscribe-button">
					<button>制作简报</button>
					<button>我要发稿</button>
				</div>
				<!-- 新闻框组件 -->
				<subscribec v-for = "(value,index) in subscribeData" :key = "index" :subscribeData="value.list" :subscribeTitle = "value.title" :subscribeId="index"></subscribec>
			</div>
			<!-- 热点组件 -->
			<div class="subscribe-information-r">
				<hotspot :hotData="hotData" @hotspotChange = "hotspotChange"></hotspot>
			</div>
		</div>
		<theme v-if="themeShow" @aaa="aaa" @themeUldata="themeUldata" :themeUlclick="themeUlclick" :themeUldatas="themeUldatas" :MUldatas="MUldatas"></theme>

	</div>
</template>

<script>
// 热点组件引入
import Hotspot from '@/components/hotspot'
// 新闻框组件引入
import Subscribec from '@/components/subscribec'
import Theme from '@/components/register/children/theme'

export default {
  data () {
    return {
      subscribeData: '', // 订阅模块数据
			hotData: '', // 订阅新闻列表数据
			themeShow: false,
			themeUlclick: 0,
			themeUldatas: [],
			MUldatas: [],
			themeBrowse: true,
			messageBrowse: false,
			titleName: '主题',
			spreadShow: {
				height: '50px'
			},
			themeId: [],
			MUldatasId: []
    }
  },
// 加载完成加载
  mounted: function () {
		this.obtain('theme/querymytheme?id=1','T')// 调用obtain方法
  },
  methods: {
		aaa: function () {
			this.themeShow = false
			var data = {
				id: 1
			}
			this.themeId = []
			this.MUldatasId = []
			if (this.themeUlclick === 0) {
				for (var i = 0; i < this.themeUldatas.length; i++) {
					this.themeId.push(this.themeUldatas[i].mtId)
				}
				data['mmtId'] = this.themeId.join(',')
			} else {
				for (var i = 0; i < this.MUldatas.length; i++) {
					this.MUldatasId.push(this.MUldatas[i].mtId)
					console.log(this.MUldatas[i].mtId)
				}
				data['inforsourceids'] = this.MUldatasId.join(',')				
			}
			this.$http.post('http://192.168.31.217:8080/member/modify/id', data)
			.then(function (response) {
				if (response.data.status === 200) {}
			})			
		},
		themeUldata: function (themeUldatas) {
      if (this.themeUlclick === 0) {
				this.themeUldatas = themeUldatas
      } else {
				this.MUldatas = themeUldatas
			}
		},
// 请求页面数据,初始化数据
    obtain: function (url,type) {
      var T = this
      T.$http.get('http://192.168.31.217:8080/'+url+'')
      .then(function (response) {
				if (response.data.status === 200) {
					T.themeUldatas = []
					T.MUldatas = []					
					for (var i = 0; i < response.data.data.length; i++) {
						var obj = new Object
						if (type === 'T') {
							obj['mtId'] = response.data.data[i].mtId
							obj['text'] = response.data.data[i].mtName
							T.themeUldatas.push(obj)
						} else {
							obj['mtId'] = response.data.data[i].id
							obj['text'] = response.data.data[i].miInforname
							T.MUldatas.push(obj)													
						}
					}
					T.subscribeData = response.data.data
					T.hotData = response.data.hotData
				}
      })
		},
// 点击热点换一换发送请求事件
    hotspotChange: function () {
      var T = this
      this.$http.get('../../../../static/json/hotspotChange.json')
      .then(function (response) {
        T.hotData = response.data.data
      })
		},
		categoryAdd: function () {
			this.themeShow = true
		},
		categoryClick: function (event) {
			this.spreadShow.height = '50px'
			if (event.target.className.indexOf('themeBrowse') !== -1) {
				this.themeUlclick = 0
				this.themeBrowse = true
				this.messageBrowse = false
				this.titleName = '主题'
				this.obtain('theme/querymytheme?id=1','T')			
			} else if (event.target.className.indexOf('messageBrowse') !== -1) {
				this.themeUlclick = 1
				this.themeBrowse = false
				this.messageBrowse = true
				this.titleName = '信息源'
				this.obtain('inforSource/myList/1','M')					 
			}
		},
		spreadClick: function () {
			if (this.themeUldatas.length > 10 || this.MUldatas.length > 10) {
				this.spreadShow.height = '100px'
			}
		},
		followList: function (e) {
			var dataId = e.target.getAttribute('data-id')
			document.getElementsByClassName('subscribec'+dataId)[0].style.display = 'block'
			console.log(document.getElementsByClassName('subscribec'+dataId)[0].offsetTop)
		}
  },
  components: {
    'hotspot': Hotspot,  // 热点组件加载
		'subscribec': Subscribec,  // 新闻框组件加载
		'theme': Theme
  }
}
</script>

<style>
	@import '../../../../static/index/subscribe.css'
</style>